import SkillDescriptionV2 from '@/components/skillDescriptionV2';
import useStore from '@/context/useStore';
import { ISkillAddItem } from '@/utils/interface';
import { SendOutlined, SaveOutlined } from '@ant-design/icons'
import { Button, Form, Input, Select, Slider, PageHeader } from 'antd'
import { observer } from 'mobx-react-lite'
import { useEffect } from 'react';
import { IRouteComponentProps } from 'umi';
import styles from './addPostSkill.less';
const { TextArea } = Input;

const AddPostSkill: React.FC<IRouteComponentProps> = ({ history, location, match }) => {
    let { Skill } = useStore();
    // 连接form
    const [form] = Form.useForm();
    let stationVersionId = location.query.stationVersionId;
    // 监听
    useEffect(() => {
        if (stationVersionId) {
            Skill.getSkillDetail(stationVersionId as string);
        }
    }, [stationVersionId])
    useEffect(() => {
        // let { majorId , name , stationVersion } = Skill.skillAddItem;
        // let { describes , salaryList , stationTask } = Skill.skillAddItem.stationLevelList[0];
        form.setFieldsValue({
            ...Skill.skillAddItem, ...Skill.skillAddItem.stationLevelList[0]
        })
        // console.log(form);

    }, [Skill.skillAddItem])
    async function addPostSkill(res: ISkillAddItem) {
        let stationVersionId = await Skill.addPostSkill(res);
        console.log(stationVersionId);
        history.replace(`/teachers/addPostSkill?stationVersionId=${stationVersionId}&see=false`);
    }
    return <div className={styles.AddPostSkill}>
        <div className={styles.topDiv}></div>
        <div className={styles.header}>
            <PageHeader
                className="site-page-header"
                // onBack={() => null}
                title="添加岗位能力"
                // subTitle="This is a subtitle"
                extra={[
                    <Button key='3'>返回</Button>,
                    <Button key='2' type="primary" icon={<SendOutlined />}>提交审核</Button>,
                ]}
            />
        </div>
        <div className={styles.main}>
            <section>
                <h3>基本信息</h3>
                <Form form={form} key={JSON.stringify(Skill.skillAddItem)} 
                initialValues={{ ...Skill.skillAddItem, ...Skill.skillAddItem.stationLevelList[0] }} onFinish={addPostSkill}>
                    <Button type="text" icon={<SaveOutlined />} htmlType="submit">保存</Button>
                    <div className={styles.fromDiv}>
                        <Form.Item label="岗位名称" name="name" rules={[{ required: true, message: "请输入岗位名称" }]}>
                            <Input />
                        </Form.Item>
                        <div className={styles.selectDiv}>
                            <Form.Item label="专业" name="majorId" rules={[{ required: true, message: "请选择专业" }]}>
                                <Select>{
                                    Skill.skillLabel.map((item, index) => {
                                        return <Select.Option key={index} value={item.id}>{item.name}</Select.Option>
                                    })
                                }</Select>
                            </Form.Item>
                        </div>
                        <Form.Item label="版本号 V" name="stationVersion" rules={[{ required: true, message: "请输入版本号" }]}>
                            <Input type="number" />
                        </Form.Item>
                        <Form.Item label="作者" name="userName" >
                            <span>郭老师</span>
                        </Form.Item>
                    </div>

                    <Form.Item label="薪酬范围" name="salaryList" rules={[{ required: true, message: "请输入薪酬范围" }]}>
                        <Slider range min={0} max={50000} />
                    </Form.Item>


                    <table>
                        <tbody>
                            <tr>
                                <td className={styles.LeftTd}>岗位描述</td>
                                <td>
                                    <Form.Item name="describes" rules={[{ required: true, message: "请输入岗位描述" }]} >
                                        <TextArea rows={10}></TextArea>
                                    </Form.Item>

                                </td>
                            </tr>
                            <tr>
                                <td className={styles.LeftTd}>岗位任务</td>
                                <td>
                                    <Form.Item name="stationTask" >
                                        <TextArea rows={10}></TextArea>
                                    </Form.Item>
                                </td>
                            </tr>
                        </tbody>

                    </table>
                </Form>
            </section>
        </div>


        <section>
            {stationVersionId ? <SkillDescriptionV2 stationVersionId={stationVersionId as string} /> : null}

        </section>
    </div>
}

export default observer(AddPostSkill);